<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>{{ detail ? detail.wharfName : '--' }}</h1>
          <el-tag v-if="detail.status === 1" type="success">{{ detail.statusStr }}</el-tag>
          <el-tag v-if="detail.status === 0" type="danger">{{ detail.statusStr }}</el-tag>
        </div>
      </div>
      <div class="company-title-box-btn">
        <el-button
          type="info"
          plain
          style="color: #0a65f3; width: 120px"
          @click="handleUpdate(detail.id)"
        >
          编辑码头
        </el-button>
        <el-button
          type="info"
          plain
          style="color: #0a65f3; width: 120px"
          @click="handleUpdateBusinesses(detail)"
        >
          修改归属商户
        </el-button>
        <el-button
          v-if="detail.status === 1"
          type="info"
          plain
          style="color: #ff4949; width: 120px"
          @click="handleUpdateStatus(detail.id, 0)"
        >
          禁用
        </el-button>
        <el-button
          v-if="detail.status === 0"
          type="info"
          plain
          style="color: #0a65f3; width: 120px"
          @click="handleUpdateStatus(detail.id, 1)"
        >
          恢复
        </el-button>
        <el-button
          type="info"
          plain
          style="color: #ff4949; width: 120px"
          @click="handleDelete(detail.id)"
        >
          删除
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item label="码头名称">
          {{ detail.wharfName }}
        </el-descriptions-item>
        <el-descriptions-item label="归属商户">
          {{ detail.businessesName }}
        </el-descriptions-item>
        <el-descriptions-item label="码头简介">
          {{ detail.wharfInfo === null || detail.wharfInfo === '' ? '--' : detail.wharfInfo }}
        </el-descriptions-item>
        <el-descriptions-item label="码头地址">
          <el-descriptions :column="1" :colon="false">
            <el-descriptions-item>
              {{ detail.fullAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <div id="baidu-map-container" style="width: 500px; height: 300px"></div>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item label="岸线长度">
          {{ detail.coastlineLength }}m
        </el-descriptions-item>
        <el-descriptions-item label="前沿高度">
          {{ detail.pierFrontHeight }}m
        </el-descriptions-item>
        <el-descriptions-item label="泊位数量"> {{ detail.berthNum }}个 </el-descriptions-item>
        <el-descriptions-item label="靠泊吨位"> {{ detail.berthTonnage }}吨 </el-descriptions-item>
        <el-descriptions-item label="货物种类">
          {{ detail.cargoType }}
        </el-descriptions-item>
        <el-descriptions-item label="吊装机械">
          {{ detail.hoistingMachinery }}
        </el-descriptions-item>
        <el-descriptions-item label="提供服务">
          {{
            detail.providedServices === null || detail.providedServices === ''
              ? '--'
              : detail.providedServices
          }}
        </el-descriptions-item>
        <el-descriptions-item label="码头照片">
          <el-image
            v-for="(item, index) in detail.photoList"
            :key="index"
            :src="item"
            fit="contain"
            style="width: 100px; height: 100px; margin-right: 10px"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ detail.contacts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ detail.contactPhone }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--  调整归属商户弹窗  -->
    <update-businesses-dialog
      :initial-selected-wharf="selectedWharf"
      :initial-selected-wharfs="selectedWharfs"
      :businesses-list="businessesList"
      :is-visible.sync="isDialogVisible"
      @updateBusinessesCallBack="handleUpdateBusinessesCallBack"
    ></update-businesses-dialog>
  </div>
</template>

<script>
import { batchUpdateStatus, deleteWharf, getWharfDetail } from '@/api/wharf';
import UpdateBusinessesDialog from '@/views/businesses/wharf/list/components/UpdateBusinessesDialog.vue';
import { getBusinessesList } from '@/api/common';

export default {
  components: { UpdateBusinessesDialog },
  data() {
    return {
      detail: {
        id: null, // id
        wharfName: '', // 码头名称
        wharfInfo: '', // 码头简介
        fullAddress: '', // 详细地址
        coastlineLength: 0, // 岸线长度
        pierFrontHeight: 0, // 前沿高度
        berthNum: 0, // 泊位数量
        berthTonnage: 0, // 靠泊吨位
        cargoType: '', // 货物种类
        hoistingMachinery: '', // 吊装机械
        providedServices: '', // 提供服务
        photoList: [], // 码头照片
        longitude: 0,
        latitude: 0,
        businessesName: '',
        businessesId: null,
        status: null,
        statusStr: '',
        contactPhone: '',
        contacts: '',
      },
      businessesList: [],
      isShowDialog: false,
      selectedWharf: {},
      selectedWharfs: [],
      isDialogVisible: false,
    };
  },
  mounted() {
    this.getWharfDetail();
    this.getBusinessesList();
  },
  methods: {
    // 获取码头详情
    getWharfDetail() {
      getWharfDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
        this.detail.photoList = JSON.parse(res.data.photoList);
        this.initBaiduMap();
      });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'WharfSave', query: { id: id } });
    },
    /**
     *
     * @param id
     */
    handleDelete(id) {
      this.$confirm('确定删除此码头？删除后数据不可恢复！', '删除', {
        confirmButtonText: '删除',
      }).then(() => {
        deleteWharf(id).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            // 删除成功，关闭当前tab页
            this.$store.dispatch('tagsView/delView', this.$route);
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    /**
     * 修改状态
     * @param id
     * @param status
     */
    handleUpdateStatus(id, status) {
      this.$confirm(
        '确定' + status === 1 ? '禁用' : '恢复' + '当前码头',
        status === 1 ? '禁用' : '恢复',
        {
          confirmButtonText: status === 1 ? '禁用' : '恢复',
        },
      ).then(() => {
        batchUpdateStatus(id, status).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getWharfDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    /**
     * 打开归属商户弹窗
     * @param wharf
     */
    handleUpdateBusinesses(wharf) {
      this.selectedWharf = wharf;
      this.isDialogVisible = true;
    },
    /**
     * 更改归属商户回调
     */
    handleUpdateBusinessesCallBack() {
      this.isDialogVisible = false;
      // 更新完成后的回调
      this.selectedWharf = null;
      this.getWharfDetail();
    },
    /**
     * 获取归属商户下拉列表
     */
    getBusinessesList() {
      getBusinessesList().then((res) => {
        this.businessesList = res.data;
      });
    },
    // 初始化百度地图
    initBaiduMap() {
      this.$nextTick(() => {
        /** 初始化地图Start */
        // eslint-disable-next-line no-undef
        var map = new BMap.Map('baidu-map-container'); // 创建地图实例
        // eslint-disable-next-line no-undef
        var point = new BMap.Point(this.detail.longitude, this.detail.latitude); // 设置中心点坐标
        map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.clearOverlays(); // 移除地图上的标注
        // eslint-disable-next-line no-undef
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        /** 初始化地图End */
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
